<template>
	<view class="content">
		<u-toast ref="uToast"></u-toast>
		<view style="width: 90%;margin: 0 auto;">
			<u-search inputAlign="center" height="40" placeholder="位置名称" v-model="keyword" @change="searchchange"
				:showAction="false"></u-search>
			<scroll-view v-if="list.length>=1" scroll-y
				style="padding: 20rpx;max-height: 200rpx;background-color: #fff;border-radius: 50rpx;">
				<view @click="navsd(i._id)" v-for="(i,e) in list" :key="i._id" style="">
					<view style="font-size: 28rpx;">{{i.title}}</view>
				</view>
			</scroll-view>
			<view
				style="font-size: 30rpx;font-weight: 500;color: #333;border-bottom: 1rpx solid #333;width: 120rpx;height: 60rpx;margin: 40rpx 0;">
				我的位置</view>
			<view v-if="!isLogin" style="position: absolute; top: 50%;left: 50%;transform: translate(-50%,-50%);">
				<view @click="navtto"
					style="color: red;font-size: 28rpx;font-weight: 600;border-bottom: 1rpx solid red;height: 60rpx;">
					请先登录</view>
			</view>
			<view v-else-if="!arrlists || arrlists.length<=0"
				style="position: absolute; top: 50%;left: 50%;transform: translate(-50%,-50%);">
				<u-empty mode="data" text="还没有位置记录哦">
				</u-empty>
				<view style="font-size: 28rpx;color: red;margin-top: 20rpx;">点击底部按钮去创建吧</view>
			</view>
			<scroll-view v-else>
				<view v-for="(i,e) in arrlists" :key="i._id"
					class="item-card"
					style="box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);border-radius: 20rpx;margin-bottom: 20rpx;padding: 20rpx;border: 2rpx solid #66BB6A;">
					<view class="header" style="display: flex;justify-content: space-between;align-items: center;">
						<view @click="navsd(i._id)"
							class="title"
							style="color: #333;font-weight: 600;font-size: 32rpx;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
							{{i.title}}
						</view>
						<view @click="deletelist(i._id)" class="delete-btn" 
							style="color: #ffffff;cursor: pointer;background-color: #66BB6A;border-radius: 20rpx;padding: 6rpx 14rpx;transition: all 0.3s ease;">
							删除
						</view>
					</view>
					<view @click="navsd(i._id)" class="sub-title" style="margin: 20rpx 0;font-size: 28rpx;color: #666;">
						{{i.name}}
					</view>
					<view v-if="userInfo.state==1" @click="navsd(i._id)" class="stats-container"
						style="display: flex;align-items: center;justify-content: space-around;">
						<view class="stat-item" style="text-align: center;">
							<view>完播</view>
							<view style="color: red;font-size: 28rpx;">{{i.num}}</view>
						</view>
						<view class="stat-item" style="text-align: center;">
							<view>昨日收益</view>
							<view style="color: red;font-size: 28rpx;">{{i.price?i.price.toFixed(2):0}}</view>
						</view>
						<view class="stat-item" style="text-align: center;">
							<view>总收益</view>
							<view style="color: red;font-size: 28rpx;">{{i.wholeprice?i.wholeprice.toFixed(2):0}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="!isCheck" @click="addcity" style="width: 110rpx;height: 110rpx;border-radius: 50%;background-color: #f45e5d;display: flex;flex-direction: column;align-items: center;justify-content: center;
		position: fixed;bottom: 10%;right: 40rpx;">
			<image style="width: 50rpx;height: 50rpx;" src="../../static/zengpng.png"></image>
			<view style="font-size: 28rpx;color: #fff;font-weight: 500;">新增</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				arrlists: [],
				keyword: '',
				token: '',
				arrdata: {},
				list: [],
				userform: {},
				isCheck: false
			}
		},
		computed: {
			...mapState(['isLogin', 'userInfo']),
		},
		onLoad() {
			this.getisCheck()
		},
		onShow() {
			this.getList()
		},
		methods: {
			async getisCheck() {
				const {
					data: res
				} = await this.$http.post('/pageList/isCheck', {})
				if (res.errCode == 200) {
					this.isCheck = res.data.isCheck
				}
			},
			async getList() {
				const {
					data: res
				} = await this.$http.post('/nav/list', {})
				if (res.errCode == 200) {
					this.arrlists = res.data
				}
			},
			async deletelist(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除吗',
					success: async (res) => {
						if (res.confirm) {
							const { data: res } = await this.$http.post('/nav/deletelist', {
								_id: id
							})
							if (res.errCode == 200) {
								uni.showToast({
									icon: 'success',
									title: '删除成功',
									success: () => {
										this.getList()
									}
								})
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// async getUser(){
			// 	this.token = uni.getStorageSync('token')
			// 	 const {data : res} = await this.$http.post('/nav/getUser',{})
			// 	if(res.errCode==200){
			// 	this.userform=res.data
			// 	}
			// },
			gomake(i) {
				console.log(i)
			},
			navsd(id) {
				if (this.isCheck) {
					uni.navigateTo({
						url: '/pages/map/map'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/dyxiugai/dyxiugai?id=' + id
				})
			},
			addcity() {
				if (!this.isLogin) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请先登录！",
					})
					return
				}
				if (this.userInfo.state != 1) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请先入驻！",
					})
					return
				}
				tt.chooseLocation({
					success: async (res) => {
						this.arrdata = {
							name: res.name,
							address: res.address,
							latitude: res.latitude,
							longitude: res.longitude
						}
						await uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo?location=' + res
								.longitude + ',' + res.latitude +
								'&key=a0e05f73cb5b5b70701b52ff3be6a919',
							success: (res) => {
								let address = res.data.regeocode.addressComponent
								if (address.city.length < 1) {
									this.arrdata.city = address.province
									this.arrdata.district = address.district
								} else {
									this.arrdata.city = address.city
									this.arrdata.district = address.district
								}
								uni.navigateTo({
									url: '/pages/dygaode/dygaode?item=' +
										decodeURIComponent(JSON.stringify(this.arrdata))
								})
							},
							fail: (error) => {
								uni.showToast({
									title: "获取位置信息失败222高德",
									icon: "none"
								});
							}
						})


					},
					fail: (res) => {
						console.log(res, 'res')
					}
				})
			},
			navtto() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			//模糊查询
			searchchange(value) {
				let ordelist = []
				this.arrlists.forEach((i, e) => {
					if (i.title.indexOf(value) >= 0) {
						ordelist.push(i)
					}
				})
				this.list = ordelist
				if (!value) {
					this.list = []
				}
				console.log(this.list, 'arrlists')
			},
		}
	}
</script>

<style scoped lang="scss">
.content {
	width: 100vw;
	height: 100vh;

	.item-card {
		background-color: #fff;
		border: 1rpx solid #ECECEC;

		.header {
			margin-bottom: 10rpx;

			.title {
				max-width: 480rpx;
			}

			.delete-btn {
				font-size: 28rpx;
				transition: all 0.3s ease;

				&:hover {
					color: #FF7875;
					background-color: #FFF0F0;
					transform: scale(1.05);
				}
			}
		}

		.sub-title {
			font-size: 28rpx;
			color: #666;
		}

		.stats-container {
			padding: 20rpx 0;

			.stat-item {
				flex: 1;
				text-align: center;

				view:first-child {
					font-size: 24rpx;
					color: #999;
				}

				view:last-child {
					font-size: 28rpx;
					color: red;
				}
			}
		}
	}
}
</style>